<template>
	<div class="wrapper">
		<!--header部分-->
		<header>
			<p>购买券包</p>
		</header>
		
		<!-- 红包列表部分 -->
		<ul class="coupons">
            <li v-for="(item, index) in coupons" :key="item.id">
				<div class="coupon-left">
					<div class="coupon-left-img">
						<img src="../assets/couponPackage.png">
					</div>
					<div class="coupon-left-info">
						<h3>{{ item.name }}</h3>
						<p>券包价格：￥{{ item.price.toFixed(2) }} - {{ item.discount.toFixed(2) }}</p>
						<p>有效期：{{ item.validity }}天</p>
					</div>
				</div>
				<div class="coupon-right">
					<div>
						<i class="fa fa-minus-circle" @click="minus(index)" v-show="item.number!=0" ></i>
					</div>
					<p><span v-show="item.number!=0">{{item.number}}</span></p>
					<div>
						<i class="fa fa-plus-circle" @click="add(index)"></i>
					</div>
				</div>
			</li>
		</ul>

		<!--订单合计部分-->
        <div class="total">
            <div class="total-left">
                <p>{{this.$formatMoney(totalPrice-totalCut, '￥')}}</p>
                <p>已优惠{{this.$formatMoney( totalCut, '￥')}}</p>
            </div>
            <div class="total-right" @click="toPayment">
                去支付
            </div>
        </div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				user:'',
				coupons: [{
						name: "满10减2",
						names:'coupon_10_2',
						price: 2,
						number:0,
						discount: 0.5,
						validity: "30"
					},
					{
						name: "满20减3",
						names:'coupon_20_3',
						price: 3,
						number:0,
						discount: 0.5,
						validity: "30"
					},
					{
						name: "满30减5",
						names:'coupon_30_5',
						price: 5,
						number:0,
						discount: 2,
						validity: "30"
					},
					{
						name: "满20减6",
						names:'coupon_20_6',
						price: 6,
						number:0,
						discount: 1.2,
						validity: "30"
					},
					{
						name: "满30减10",
						names:'coupon_30_10',
						price: 10,
						number:0,
						discount: 3,
						validity: "30"
					},
					{
						name: "满50减15",
						names:'coupon_50_15',
						price: 15,
						number:0,
						discount: 5,
						validity: "30"
					},
				],
			};
		},
		created(){
			this.user = this.$getSessionStorage('user');
		},
		computed: {
			totalPrice() {
				let totalPrice = 0;
				for (let coupon of this.coupons) {
					totalPrice += coupon.price * coupon.number;
				}
				return totalPrice;
			},
			totalCut() {
				let totalCut = 0;
				for (let coupon of this.coupons) {
					totalCut += coupon.discount* coupon.number;
				}
				return totalCut;
			},
		},
		methods: {
			minus(index){
				const coupon = this.coupons[index];
				coupon.number--;
			},
			add(index){
				const coupon = this.coupons[index];
				coupon.number++;
			},
			toPayment() {
				let url_putCoupon = `/CouponController/addCoupon/${this.user.token.token}/${this.coupons[0].number}/${this.coupons[1].number}/${this.coupons[2].number}/${this.coupons[3].number}/${this.coupons[4].number}/${this.coupons[5].number}`
				this.$axios.put(url_putCoupon)
				// (`CouponController/addCoupon/${this.user.token.token}`, this.$qs.stringify({
				// 	//userId:this.user.userId,
				// 	coupon_10_2: this.coupons[0].number,
				// 	coupon_20_3: this.coupons[1].number,
				// 	coupon_30_5: this.coupons[2].number,
				// 	coupon_20_6: this.coupons[3].number,
				// 	coupon_30_10: this.coupons[4].number,
				// 	coupon_50_15: this.coupons[5].number,
				// 	}))
				.then(response => {
					if(response.data.result !== null){
						// console.log(response.data.result);
					// 	const selectedCouponNames = this.selectedCoupons.map((index) => this.coupons[index].name);
					// alert(`已购买以下优惠券：\n${selectedCouponNames.join("\n")}\n总价：￥${this.total.toFixed(2)}`);
					this.$router.push({path:'/payDone',query:{orderTotal: this.totalPrice -this.totalCut}});
				}
				else{
					alert('购买券包失败，请重试！')
				}		

				})
				.catch(error => {
					console.error(error);
				});
			},
			
		},
	};
</script>

<style scoped>
	/*********总容器************/
	.wrapper {
		height: 100%;
		width: 100%;
	}

	/*********header部分********/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/*********红包列表部分********/
	.wrapper .coupons{
		width: 100%;
		padding-top: 14vw;
		padding-bottom: 14vw;/* 添加底部固定元素高度的底部内边距，以避免内容被底部元素遮挡  */
	}
	.wrapper .coupons li{
		width: 100%;
		box-sizing: border-box;
		padding: 2.5vw;
		user-select: none;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wrapper .coupons li .coupon-left{
		display: flex;
		align-items: center;/* 子元素垂直居中 */
	}
	.wrapper .coupons li .coupon-left img{
		width: 18vw;
		height: 18vw;
		padding-right: 1vw;
	}
	.wrapper .coupons li .coupon-left .coupon-left-info{
		margin-left: 3vw;
	}
	.wrapper .coupons li .coupon-left .coupon-left-info h3{
		font-size: 3.8vw;
		color: #555;
	}
	.wrapper .coupons li .coupon-left .coupon-left-info p{
		font-size: 3vw;
		color: #888;
		margin-top: 2vw;
	}
	.wrapper .coupons li .coupon-right{
		width: 16vw;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wrapper .coupons li .coupon-right .fa-minus-circle{
		font-size: 5.5vw;
		color: #999;
		cursor: pointer;
	}
	.wrapper .coupons li .coupon-right .p{
		font-size: 3.6vw;
		color: #333;
	}
	.wrapper .coupons li .coupon-right .fa-plus-circle{
		font-size: 5.5vw;
		color: #0097EF;
		cursor: pointer;
	}
	/************ 订单合计部分 *************/
.total {
    width: 100%;
    height: 16vw;

    position: fixed;
    left: 0;
    bottom: 0;

    display: flex;
}
.total .total-left{
    flex: 2; /*占据页面 2/3 */

    display: flex;
    flex-direction: column; /* 设置为垂直方向的列布局 */
    justify-content: center;
    align-items: center;

    color:  #fff;
    background-color: #505051;

    user-select: none; /* 禁止用户选择元素内的文本内容 */
}
.total .total-left p:first-child{
    font-size:  4.5vw;
    font-weight: 700; 
}
.total .total-left p:last-child{

}
.total .total-right{
    flex: 1; /*占据页面 1/3 */

    display: flex;
    justify-content: center;
    align-items: center;

    color:  #fff;
    background-color: #38CA73;

    font-size:  4.5vw;
    font-weight: 700;

    user-select: none; /* 禁止用户选择元素内的文本内容 */
    cursor: pointer; /*  当鼠标悬停在元素上时，将鼠标指针设置为指示链接的手型 */
}
</style>
